<template>
  <div class="setting-container">
    <el-card class="box-card">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="角色管理" name="aa">
          <el-button
            style="margin:15px  0;"
            icon="el-icon-plus"
            size="mini"
            type="primary"
            @click="btnDia"
            >新增角色</el-button
          >

          <!-- 表格 -->
          <el-table
            :data="tableData"
            border
            style="width: 100%"
            :row-class-name="tableRowClassName"
          >
            <el-table-column label="序号" width="50">
              <template slot-scope="{ $index, row }">
                <!-- {{ $index }}  -->

                {{ (pageObj.page - 1) * pageObj.pagesize + 1 + $index }}
              </template>
            </el-table-column>
            <el-table-column prop="name" label="角色" width="180">
            </el-table-column>
            <el-table-column prop="description" label="描述"> </el-table-column>
            <el-table-column label="操作" width="160">
              <template slot-scope="{ row }">
                <el-button @click="rightBtn(row.id)" type="text" size="mini"
                  >分配权限</el-button
                >
                <el-button size="mini" type="text" @click="btnDia(row)"
                  >修改</el-button
                >
                <el-button @click="delRole(row.id)" type="text">删除</el-button>
              </template>
            </el-table-column>
          </el-table>

          <!-- 分页 -->

          <el-pagination
            style="text-align:right;margin:20px  0 "
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page.sync="currentPage1"
            :page-size="pageObj.pagesize"
            layout="total, prev, pager, next"
            :total="total"
          >
          </el-pagination>
        </el-tab-pane>
        <el-tab-pane label="公司信息" name="bb">
          <!-- 表单 -->
          <el-form
            style="width:40%;margin:30px  100px  "
            :label-position="labelPosition"
            label-width="80px"
            :model="formLabelAlign"
            disabled
          >
            <el-form-item label="企业名称">
              <el-input v-model="formLabelAlign.name"></el-input>
            </el-form-item>
            <el-form-item label="公司地址">
              <el-input v-model="formLabelAlign.address"></el-input>
            </el-form-item>
            <el-form-item label="公司电话">
              <el-input v-model="formLabelAlign.mobile"></el-input>
            </el-form-item>
            <el-form-item label="邮箱">
              <el-input v-model="formLabelAlign.email"></el-input>
            </el-form-item>
            <el-form-item label="备注">
              <el-input v-model="formLabelAlign.des"></el-input>
            </el-form-item>
          </el-form>
        </el-tab-pane>
      </el-tabs>
    </el-card>

    <div style="text-align:center">
      <a
        style="text-align:center"
        class="el-icon-platform-eleme"
        href="https://github.com/"
      ></a>
      <p style="text-align:center">copyright 2018 iHRM 系统 版权所有</p>
    </div>

    <!--修改和添加对话框 -->
    <el-dialog
      title="添加角色"
      :visible.sync="dialogFormVisible"
      @close="close"
    >
      <el-form :model="form" :rules="rulesForm" ref="refFrom">
        <el-form-item
          prop="name"
          label="角色名称"
          :label-width="formLabelWidth"
        >
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item
          prop="description"
          label="角色描述"
          :label-width="formLabelWidth"
        >
          <el-input v-model="form.description" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="addRole">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 授权 -->
    <el-dialog
      v-if="dialogRightsVisible"
      title="分配权限"
      :visible.sync="dialogRightsVisible"
      @close="close2"
    >
      <!-- 显示树形组件 -->
      <el-tree
        ref="treeRights"
        :data="treeList"
        show-checkbox
        node-key="id"
        default-expand-all
        :default-checked-keys="defaultChecked"
        :props="defaultProps"
      >
      </el-tree>

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogRightsVisible = false">取 消</el-button>
        <el-button type="primary" @click="addRights">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import {
  settingGetListApi,
  settingAddRoleApi,
  settingUpdateRoleApi,
  settingRoleRightsApi,
  settingRoleDelApi,
  settingRoleToRightsApi
} from "@/api/setting";

import { permissionListApi } from "@/api/permission";
import { tranListToTreeData } from "@/utils";
export default {
  data() {
    return {
      activeName: "aa",
      /* 表格 */
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄"
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄"
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄"
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄"
        }
      ],
      /* 分页 */
      currentPage1: 1,
      total: 0,

      /* 表单 */
      labelPosition: "right",
      formLabelAlign: {
        name: "企业名称",
        address: "武汉黄陂区传智播客科创园",
        mobile: "13999999999",
        email: "139@itcast.cn",
        des: "黑马程序员"
      },
      pageObj: {
        page: 1,
        pagesize: 3
      },

      /* 对话框  修改+  添加 */
      dialogFormVisible: false,
      form: {
        name: "",
        description: ""
      },
      formLabelWidth: "120px",
      rulesForm: {
        name: [{ required: true, message: "请输入角色名称", trigger: "blur" }],
        description: [
          { required: true, message: "请输入角色描述", trigger: "blur" }
        ]
      },
      /* 授权 */
      treeList: [],
      dialogRightsVisible: false,
      defaultProps: {
        children: "children",
        label: "name"
      },
      roleId: "",

      defaultChecked: [] //  所有选中的权限节点id
    };
  },
  created() {
    //console.log(this, 22222);
    this.getSettingList();
  },
  methods: {
    /* 获取角色表格数据 */
    async getSettingList() {
      const { rows, total } = await settingGetListApi(this.pageObj);
      this.tableData = rows;
      this.total = total;

      /*
      1    2   3

      1    4   7   (3-1)3+1+i
      2    5
      3    6

      (page-1)*pagesize+1+ i
       */
    },
    handleClick(tab, event) {
      //console.log(tab, event);
    },

    /* 表格 */
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex === 1) {
        return "warning-row";
      } else if (rowIndex === 3) {
        return "success-row";
      }
      return "";
    },
    handleEdit() {},
    handleDelete() {},

    /* 分页 */
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      //console.log(`当前页: ${val}`);
      this.pageObj.page = val; //  重置当前页
      this.getSettingList();
    },

    /* 修改+添加对话框 */
    async btnDia(row) {
      console.log(row, 3333); //row.id  表示角色id
      if (row.id) {
        //  点击的是修改
        //  获取当前角色对应的权限
        const res = await settingRoleRightsApi(row.id); //  还是当前这一行的所有的数据
        console.log(res, 22222);
        this.form = res; //  这里有角色id
      } else {
        //  点击的是添加
      }

      this.dialogFormVisible = true;
    },
    /* 删除角色 */
    async delRole(id) {
      const res = await this.$confirm(
        "此操作将永久删除该文件, 是否继续?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }
      ).catch(err => err);
      console.log(res, 33333);
      if (res == "confirm") {
        await settingRoleDelApi(id);
        this.getSettingList();
      }
    },
    close() {
      //this.$refs.refFrom.resetFields();
      this.dialogFormVisible = false;
      this.dialogRightsVisible = false;
      this.form = {
        name: "",
        description: ""
      };
      this.getSettingList();
    },
    close2() {
      //this.$refs.refFrom.resetFields();
      this.defaultChecked = [];

      this.dialogRightsVisible = false;
    },
    /* 添加角色 +  修改*/
    addRole() {
      //  二次校验
      this.$refs.refFrom.validate(async isOk => {
        if (isOk) {
          /* 判断是添加还是修改进来的    */
          if (this.form.id) {
            //  表示修改
            await settingUpdateRoleApi(this.form);
          } else {
            //  添加
            //  发送请求
            await settingAddRoleApi(this.form);
          }

          this.close();
        }
      });
    },

    /*所有权限 +  当前权限 */
    async getPermissionList(id) {
      /* 获取所有的权限列表 */
      const res = await permissionListApi();
      this.treeList = tranListToTreeData(res, "0");
      //console.log(this.treeList, 55555);
      /* 获取当前的权限 */
      const res2 = await settingRoleRightsApi(id); //  还是当前这一行的所有的数据
      //console.log(res2, 6666);
      this.defaultChecked = res2.permIds;
    },
    /* 添加权限对话框按钮 */
    rightBtn(id) {
      this.getPermissionList(id);
      this.defaultChecked = []; //  初始化之前的权限
      this.roleId = id;
      /*
      1-获取所有的权限列表
      2-获取当前的权限并展示出来
      3-显示对话框
       */

      this.dialogRightsVisible = true;
    },

    /* 点击确认按钮授权 */
    async addRights() {
      // const permIds = this.$refs.treeRights.getCheckedKeys();
      // console.log(qq, 112233);
      await settingRoleToRightsApi({
        id: this.roleId,
        permIds: this.$refs.treeRights.getCheckedKeys()
      });

      this.close2();
    }
  }
};
</script>
